<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/base.js"></script>

</head>
<body>

    <input type="text" placeholder="输入用户的id" id="userId"/><br>
    <input type="text" placeholder="输入服务模块的id" id="serviceId"/><br>
    <img id="faceImage" height="100px" width="100px" style="border-style: solid;border-color: #000000;border-width: 1px"/>
    <br>
    <input id="face" type="file" />
    <br>
    <button onclick="onSubmitClick();">录入人脸信息</button>
<script>
     let inputFace=document.getElementById("face");
     inputFace.onchange=function(){
         handleFile(inputFace.files);
     };

     function handleFile(files) {
        if (files.length > 1) {
            // 最多只能选四张，当前选中的和已显示之和不能大于4
            alert('最多1张');
            return;
        }
        if (files[0]) {
            // 将文件生成url
            let srcValue = window.URL.createObjectURL(files[0]);
            document.getElementById("faceImage").src=srcValue;
            readAsDataURL();
        }
    }

    function onSubmitClick() {
        let url="http://localhost:9003/kx/face/save";
        let requestJSON={};
        requestJSON.userId=document.getElementById("userId").value;
        requestJSON.serviceId=document.getElementById("serviceId").value;
        requestJSON.face=base64;
        $.rest("POST",url,requestJSON,function(data){
            if(data.code==200){
                alert("上传成功");
            }else{
                alert("上传失败");
            }
        });

        return false;
    }


     let base64;
     function readAsDataURL()
     {
         if(typeof FileReader=='undifined')          //判断浏览器是否支持filereader
         {
             result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>";
             return false;
         }
         let file=document.getElementById("face").files[0];
         if(!/image\/\w+/.test(file.type))           //判断获取的是否为图片文件
         {
             alert("请确保文件为图像文件");
             return false;
         }
         let reader=new FileReader();
         reader.readAsDataURL(file);
         reader.onload=function(e)
         {
             // var result=document.getElementById("result");
             // result.innerHTML='<img src="'+this.result+'" alt=""/>'
             base64=this.result;
             base64= base64.substring(base64.indexOf(",")+1);
         }
     }

</script>
</body>
</html>